<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OpenApi接口文档</title>
    <link rel="stylesheet" href="lib/element-ui/index.css">

    <style type="text/css">
        .el-collapse-item__header{
            font-size:20px;
        }
        .api-collapse .el-collapse-item__header{
            background-color:#409EFF;
            padding: 8px 10px;
        }

        .api-collapse .el-collapse-item__content{
            padding: 20px;
        }

        .method-collapse .el-collapse-item__header{
            background-color:#60BEFF;
             padding: 8px 10px;
        }

        .method-collapse .el-collapse-item__content{
            padding: 20px;
        }

        .ret-val{
            color: #606266;
        }

        .el-tree{
            overflow-x: scroll;
        }

        .tip-count{
            padding-left: 10px;
            font-size: 12px;
            color: grey;
        }

        .describe-txt{
            font-size: 16px;
            color: grey;
            margin-bottom: 20px;
        }




    </style>

    <script src="lib/jquery/jquery-3.6.0.min.js"></script>
    <script src="lib/vue/vue.min.js"></script>
    <script src="lib/element-ui/index.js"></script>
</head>
<body>
<h1 align="center">OpenApi接口文档</h1>

<!-- API接口文档渲染到此处 -->
<div id="api" style="display:none">
    <div class="tip-count">API个数：{{ apis.length }}, 方法个数：{{ countMethod(apis) }}</div>
    <!-- api折叠面板 -->
    <el-collapse class="api-collapse">
        <!-- api折叠面板元素 -->
        <el-collapse-item v-for="api in apis">
            <!-- api折叠面板元素标题 -->
            <template slot="title">
                <div>
                    {{ api.cnName ? (api.openApiName + ' : ' + api.cnName) : api.openApiName }}
                    <span class="tip-count">方法个数：{{ api.methods.length }}</span>
                </div>
            </template>

            <!-- api描述 -->
            <div class="describe-txt">{{ api.describe }}</div>

            <!-- 方法折叠面包 -->
            <el-collapse class="method-collapse">
                <!-- method折叠面板元素 -->
                <el-collapse-item v-for="method in api.methods">
                    <!--  method折叠面板元素标题 -->
                    <template slot="title">
                        <div>
                            {{method.cnName ? (method.openApiMethodName + ' : ' + method.cnName) :
                            method.openApiMethodName}}
                        </div>
                    </template>

                    <!-- 方法描述 -->
                    <div class="describe-txt">{{ method.describe }}</div>

                    <!-- 方法参数表格 -->
                    <el-table
                            :data="method.params"
                            style="width: 100%">
                        <el-table-column
                                prop="name"
                                label="参数名"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="cnName"
                                label="参数中文名"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="type"
                                label="参数类型"
                                width="200">
                        </el-table-column>
                        <el-table-column
                                prop="properties"
                                label="参数对象属性"
                                width="400">
                            <template slot-scope="scope">
                                <!-- 随便你自定义，通过（scope.row）拿到当前行数据-->
                                <el-tree v-if="scope.row.properties!=null && scope.row.properties.length>0"
                                         :data="convertProperties(scope.row.properties)" :props="treeProps">
                                <span class="custom-tree-node" slot-scope="{ node, data }">
                                    <span :title="data.describe">{{ node.label }}</span>
                                 </span>
                                </el-tree>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="describe"
                                label="描述">
                        </el-table-column>
                    </el-table>

                    <!-- 方法返回值 -->
                    <el-table
                            :data="[method.retVal]"
                            style="width: 100%">
                        <el-table-column
                                prop="cnName"
                                label="返回值名称"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="retType"
                                label="返回值类型"
                                width="200">
                        </el-table-column>
                        <el-table-column
                                prop="properties"
                                label="返回值对象属性"
                                width="400">
                            <template slot-scope="scope">
                                <!-- 随便你自定义，通过（scope.row）拿到当前行数据-->
                                <el-tree v-if="scope.row.properties!=null && scope.row.properties.length>0"
                                         :data="convertProperties(scope.row.properties)" :props="treeProps">
                                 <span class="custom-tree-node" slot-scope="{ node, data }">
                                    <span :title="data.describe">{{ node.label }}</span>
                                 </span>
                                </el-tree>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="describe"
                                label="描述">
                        </el-table-column>
                    </el-table>
                    </el-card>
                </el-collapse-item>
            </el-collapse>
</div>

</body>
<script type="text/javascript">
var pageUrl = window.location.href;
var jsonUrl = pageUrl.substring(0,pageUrl.lastIndexOf('.'));
//获取接口数据
 $.ajax({
    url:jsonUrl,
    dataType: "json",
    success:function(jsonData){
        //渲染到网页上
        var app4 = new Vue({
          el: '#api',
          data: {
            apis: jsonData,
            treeProps: {
              children: 'properties',
              label: 'label'
            }
          },
          mounted: function(){
            $('#api').show();
          },
          methods: {
            countMethod: function(apis){
                var count = 0;
                for(var i=0;i<apis.length;i++){
                    var methods = apis[i].methods;
                    for(var j=0;j<methods.length;j++){
                        count++;
                    }
                }
                return count;
            },
            convertProperties: function(properties){
                var props = [];
                if(properties != null && properties.length > 0 ) {
                    for(var i=0; i< properties.length; i++){
                        var property = properties[i];
                        var prop = {};

                        //拼接需要展示的数据:属性名+属性类型+属性中文名
                        var label = property.name + ' : ' + property.type;
                        if(property.cnName){
                            label += ' : ' + property.cnName;
                        }
                        prop.label = label;
                        prop.describe = property.describe;

                        //递归转换属性的属性
                        prop.properties = this.convertProperties(property.properties);

                        props.push(prop);
                    }
                }
                return props;
            }
          }
        })

  }});




</script>
</html>